<template>
<el-dialog
  title="属性"
  :visible.sync="dialogVisible"
  width="20%"
  :append-to-body="true"
  :before-close="handleClose">
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="审核人:" prop="userId">
      <el-select
      v-model="form.userId"
      filterable
      remote
      reserve-keyword
      placeholder="输入账号|手机号查询"
      :remote-method="remoteMethod"
      :loading="loading">
        <el-option
          v-for="item in userOptions"
          :key="item.id"
          :label="item.username"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>
import { Graph } from '@antv/x6'

import { userEnableList } from '@/api/user'

export default {
  name: 'TaskProperty',
  props: {
    visible: {
      type: Boolean,
      default: ()=> false
    },
    nodeId: {
      type: String,
      default: ()=> null
    },
    graph: {
      type: Graph,
      default: ()=> null
    }
  },
  data() {
    return {
      query: {
        keyword: ''
      },
      form: {
        userId: null
      },
      rules: {
        userId: [{required: true, message: '请选择审核人', trigger: 'blur,change'}]
      },
      userOptions: [],
      loading: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      }
    }
  },
  created() {
    this.loadUserInfo()
  },
  methods: {
    async loadUserInfo() {
      const res = await userEnableList({ ...this.query })
      console.log(res)
      this.userOptions = res.data
    },

    remoteMethod(keyword) {
      this.loading = true
      this.query.keyword = keyword
      this.loadUserInfo()
      this.loading = false
    },

    // 关闭弹窗
    handleClose() {
      const node = this.graph.getCellById(this.nodeId)
      node.setData({ openProperty: false })
    },

    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid)=> {
        if(valid){
          const node = this.graph.getCellById(this.nodeId)
          const userInfo = this.userOptions.filter(item=> item.id === this.form.userId)[0]
          const taskData= {
            userId: userInfo.id,
            username: userInfo.username
          }
          node.setData({ openProperty: false, taskData: taskData})
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>